<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { enum as zenum, object as zobject, string as zstring } from 'zod'

const status = ref('') // success/fail
const title = ref('')
const subtitle = ref('')

onLoad(async (query) => {
  const zparse = zobject({
    status: zenum(['success', 'fail']),
    title: zstring().min(1),
    subtitle: zstring().optional(),
  }).safeParse(query)
  if (!zparse.success) {
    return
  }
  status.value = zparse.data.status
  title.value = zparse.data.title
  subtitle.value = zparse.data.subtitle ?? ''
})
</script>

<template>
  <view class="h-100vh w-100vw flex flex-col items-center bg-white py-100px">
    <view v-if="status === 'success'" class="i-tdesign:check-circle text-140px text-[green]"></view>
    <view v-else-if="status === 'fail'" class="i-tdesign:close-circle text-140px text-[red]"></view>

    <view class="mt-100px text-50px">{{ title }}</view>

    <view class="mt-40px text-28px text-gray-400">{{ subtitle }}</view>
  </view>
</template>

<style lang="less" scoped></style>
